<template>
    <div>
        <VoStepFrom ref="step" :schema="schema" :rules="rules" :steps="steps" :options="options"></VoStepFrom>
        <div>
            <el-button type="primary" @click="logSchema">schema</el-button>
            <el-button type="primary" @click="setKeys">setKeys</el-button>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import VoStepFrom from '@/components/StepForm/index.vue'
import CodeTpl from './md/step-sf.md';

export default {
    components: {
        VoStepFrom,
        CodeTpl
    },
    data() {
        return {
            options: {
                alignCenter: true,
                simple: true
            },
            steps: [{
                title: '第一步',
                description: '描述文字',
                icon: 'el-icon-share'
            }, {
                title: '第二步',
                description: '描述文字',
                icon: 'el-icon-share'
            }, {
                title: '第三步',
                description: '描述文字',
                icon: 'el-icon-share'
            }],
            schema: {
                properties: [
                    {
                        model: 'name',
                        widget: 'input',
                        label: '姓名',
                        tab: '第一步',
                        ui: {
                            placeholder: '请输入姓名'
                        },
                        rules: [
                            { required: true, message: '请输入姓名', trigger: 'blur' }
                        ]
                    }, {
                        model: 'course',
                        widget: 'select',
                        label: '课程',
                        tab: '第一步',
                        ui: {
                            placeholder: '请选择课程'
                        },
                        custom: {
                            visibleAsync: true
                        },
                        asyncData() {
                            return new Promise(resolve => {
                                setTimeout(() => {
                                    resolve([
                                        { label: '语文', value: '语文' },
                                        { label: '数学', value: '数学' },
                                        { label: '英语', value: '英语' },
                                        { label: '物理', value: '物理' },
                                        { label: '化学', value: '化学' },
                                        { label: '地理', value: '地理' },
                                        { label: '生物', value: '生物' },
                                        { label: '历史', value: '历史' },
                                        { label: '政治', value: '政治' }
                                    ])
                                }, 2000)
                            })
                        }
                    }, {
                        model: 'age',
                        widget: 'inputNumber',
                        label: '年龄',
                        tab: '第一步'
                    }, {
                        model: 'phone',
                        widget: 'input',
                        label: '电话',
                        tab: '第一步',
                        ui: {
                            placeholder: '请输入电话'
                        }
                    }, {
                        model: 'email',
                        widget: 'input',
                        label: '邮箱',
                        tab: '第一步',
                        ui: {
                            placeholder: '请输入邮箱'
                        }
                    }, {
                        model: 'sex',
                        widget: 'radioButton',
                        label: '性别',
                        tab: '第一步',
                        enum: [
                            { label: '男' },
                            { label: '女' },
                            { label: '保密' }
                        ]
                    }, {
                        model: 'wechart',
                        widget: 'input',
                        label: '微信',
                        tab: '第一步',
                        if: {
                            sex: '女'
                        },
                        ui: {
                            placeholder: '请务必输入微信'
                        }
                    }, {
                        model: 'address',
                        widget: 'input',
                        label: '住址',
                        tab: '第一步',
                        ui: {
                            type: 'textarea',
                            placeholder: '请输入住址'
                        }
                    }, {
                        model: 'organization',
                        widget: 'tree',
                        label: '组织',
                        tab: '第一步',
                        enum: [{
                            label: '开发部',
                            id: 'A',
                            children: [{
                                label: '架构师',
                                id: 'A-1'
                            }, {
                                label: 'Web前端工程师',
                                id: 'A-2'
                            }, {
                                label: 'Android工程师',
                                id: 'A-3'
                            }, {
                                label: 'IOS工程师',
                                id: 'A-4'
                            }, {
                                label: 'JAVA工程师',
                                id: 'A-5'
                            }, {
                                label: 'PHP工程师',
                                id: 'A-6'
                            }, {
                                label: 'Python工程师',
                                id: 'A-7'
                            }]
                        }, {
                            label: '产品部',
                            id: 'B',
                            children: [{
                                label: '产品经理',
                                id: 'B-1'
                            }, {
                                label: '产品助理',
                                id: 'B-2'
                            }, {
                                label: '测试',
                                id: 'B-3'
                            }, {
                                label: '实施',
                                id: 'B-4'
                            }]
                        }],
                        ui: {
                            nodeKey: 'id',
                            showCheckbox: true
                        }
                    }, {
                        model: 'intention',
                        widget: 'input',
                        label: '求职意向',
                        tab: '第二步',
                        ui: {
                            type: 'textarea',
                            placeholder: '请输入求职意向'
                        }
                    }, {
                        model: 'education',
                        widget: 'input',
                        label: '教育背景',
                        tab: '第二步',
                        ui: {
                            type: 'textarea',
                            placeholder: '请输入教育背景'
                        }
                    }, {
                        model: 'certificate',
                        widget: 'input',
                        label: '证书',
                        tab: '第二步',
                        ui: {
                            type: 'textarea',
                            placeholder: '请输入证书'
                        }
                    }, {
                        model: 'experience',
                        widget: 'input',
                        label: '工作经历',
                        tab: '第三步',
                        ui: {
                            type: 'textarea',
                            placeholder: '请输入工作经历',
                            autosize: {
                                minRows: 4,
                                maxRows: 8
                            }
                        }
                    }, {
                        model: 'evaluation',
                        widget: 'input',
                        label: '自我评价',
                        tab: '第三步',
                        ui: {
                            type: 'textarea',
                            placeholder: '请输入自我评价',
                            autosize: {
                                minRows: 4,
                                maxRows: 8
                            }
                        }
                    }, {
                        model: 'score',
                        widget: 'rate',
                        label: '评分'
                    }, {
                        model: 'text',
                        widget: 'text',
                        label: '文本',
                        custom: {
                            innerHtml: true
                        }
                    }, {
                        model: 'checkbox',
                        widget: 'checkbox',
                        label: '复选框',
                        enum: [
                            { value: '选项1', label: '1' },
                            { value: '选项2', label: '2' },
                            { value: '选项3', label: '3' },
                            { value: '选项4', label: '4' }
                        ]
                    }
                ].reduce((a, b) => {
                    a[b.model] = b
                    return a
                }, {}),
                ui: {
                    labelWidth: '100px'
                },
                row: {
                    type: 'flex',
                    style: {
                        flexWrap: 'wrap'
                    }
                },
                col: {
                    span: 12,
                    xs: { span: 24 },
                    sm: { span: 24 },
                    md: { span: 24 },
                    lg: { span: 12 },
                    xl: { span: 8 }
                }
            },
            rules: {
                phone: [
                    { required: true, message: '请输入电话', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                intention: [
                    { required: true, message: '请输入求职意向', trigger: 'blur' }
                ],
                wechart: [
                    { required: true, message: '请务必输入微信', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.$set(this.$refs.step.model, 'text', '<p>昔人已乘黄鹤去，此地空余黄鹤楼。</p><p>黄鹤一去不复返，白云千载空悠悠。</p><p>晴川历历汉阳树，芳草萋萋鹦鹉洲。</p><p>日暮乡关何处是，烟波江上使人愁。</p>')
    },
    methods: {
        logSchema() {
            console.log(this.$refs.step.currentSchema);
            console.log(this.$refs.step.model);
        },
        setKeys() {
            // const item = this.$refs.step.currentSchema.properties.find(e => e.model === 'organization')
            // if (item) {
            //     item.$setCheckedKeys(['1-1'])
            // }
            if (this.$refs.step.model.organization) {
                // this.$refs.step.model = {}
                this.$set(this.$refs.step.model, 'organization', null)
            } else {
                this.$set(this.$refs.step.model, 'organization', ['A-1'])
            }
        }
    }
}
</script>
